<template>
  <div class="app">
    <el-dialog
      title="题目预览"
      :visible="showDialog"
      width="45%"
      :before-close="handleClose"
    >
      <span>
        <el-row>
          <el-col :span="6">
            【题型】 : {{questionObj[detailList.questionType]}}
          </el-col>
          <el-col :span="6">
            【编号】 : {{detailList.id}}
          </el-col>
          <el-col :span="6">
            【难度】 : {{difficultyObj[detailList.difficulty]}}
          </el-col>
          <el-col :span="6">
            【标签】 : {{detailList.tags}}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            【学科】 : {{detailList.subjectName}}
          </el-col>
          <el-col :span="6">
            【目录】 : {{detailList.directoryName}}
          </el-col>
          <el-col :span="6">
            【方向】 : {{detailList.direction}}
          </el-col>
        </el-row>
        <hr/>
        <el-row>
          <el-col :span="24">【题干】:</el-col>
        </el-row>
          <el-row>
            <el-col :span="24">
              <div v-html="detailList.question"></div>
            </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <span>{{questionObj[detailList.questionType]}} 选项: (以下选中的选项为正确答案)</span>
            </el-col>
        </el-row>
        <el-row>
          <el-checkbox-group v-model="checkList" class="checkbox">
          <el-checkbox v-for="item in detailList.options" :key="item.id" :label="item.isRight" @click.native.prevent>
            {{item.title}}
          </el-checkbox>
          </el-checkbox-group>
        </el-row>
        <hr/>
        <el-row>
          <el-col :span="24">
            【参考答案】 :  <el-button type="danger" @click="flag = true">视频答案预览</el-button>
          </el-col>
        </el-row>
        <el-row v-if="flag">
          <el-col :span="24">
            <!-- <video :src="detailList.videoURL" controls></video> -->
          </el-col>
        </el-row>
        <hr/>
        【答案解析】 : {{detailList.remarks}}
        <hr/>
        【题目备注】:  {{detailList.remarks}}
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClose">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
export default {
  props: {
    showDialog: {
      type: Boolean,
      required: true
    }
    // row: {
    //   type: [Object, null],
    //   required: true
    // }
  },
  data () {
    return {
      detailList: {},
      checkList: [],
      flag: false,
      checked: false,
      questionObj: {
        1: '多选',
        2: '简答',
        3: '单选'
      },
      difficultyObj: {
        1: '简单',
        2: '一般',
        3: '困难'
      }
    }
  },
  methods: {
    handleClose () {
      this.$emit('update:showDialog', false)
    },
    async getDetailList (row) {
      console.log(row)

      const res = await detail(row)
      this.detailList = res.data
      //   console.log(this.detailList.videoURL)
      res.data.options.forEach(item => {
        if (item.isRight === 1) this.checkList.push(item.isRight)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-row{
  margin-bottom: 20px;
}
.checkbox{
  display: flex;
  flex-direction: column;
  .el-checkbox{
      margin: 10px 0;
  }
}
</style>
